<template>
  <mi-header></mi-header>
  <div>
    <div class="xm-product-box">
      <div class="nav-bar">
        <div class="container">
          <h2>Xiaomi MIX 4</h2>
          <div class="con">
            <div class="left">
              <span class="separator">|</span>
              <a href="https://www.mi.com/mixfold">MIX FOLD 小米折叠屏手机</a>
            </div>
            <div class="right">
              <a href="https://www.mi.com/mix4" target="">概述页</a>
              <span class="separator">|</span>
              <a href="https://www.mi.com/mix4/specs" target="">参数页</a>
              <span class="separator">|</span>
              <a href="https://www.mi.com/order/fcode" target="_blank"
                >F码通道</a
              >
              <span class="separator">|</span>
              <a
                href="javascript:void(0);"
                class="J_contactBtn"
                product_id="14789"
                gid="2213100014"
                >咨询客服</a
              >
              <span class="separator">|</span>
              <a
                class="J_nav_comment"
                href="//www.mi.com/comment/14789.html"
                target="_blank"
                >用户评价</a
              >
              <a class="btn btn-small btn-primary J_nav_buy hide">立即购买</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="mi-detail">
    <div class="page">
      <div class="page-box">
        <div class="page-info">
          <div class="product-box container">
            <div class="img-left">
              <div class="product-imglist J_imgListBox">
                <div class="img-box J_imgList">
                  <img :src="phone.pic_urls" />
                </div>
              </div>
            </div>
            <div class="product-con">
              <h2>{{ phone.name }}</h2>
              <p class="sale-desc">
                <font color="#ff4a00"
                  >「购机最高享24期分期免息；+949元得Micare保障服务」</font
                >
                {{ phone.description }}
              </p>
              <p class="company-info">小米自营</p>
              <div class="price-info">
                <span>{{ phone.price }}</span>
              </div>
              <div class="line"></div>

              <div class="address-box">
                <div class="product-address">
                  <i class="iconfont el-icon-location-information"></i>
                  <div class="address-con">
                    <div>
                      <div class="address-info">
                        <span>江苏</span><span>南京市</span><span>江宁区</span
                        ><span>东山街道</span>
                      </div>
                      <a href="javascript:void(0);" class="edit">修改</a>
                    </div>
                    <div class="info">
                      <div class="desc"><span>有现货</span></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="buy-option">
                <div class="buy-box-child">
                  <div class="option-box">
                    <div class="title">选择版本</div>
                    <ul class="clearfix">
                      <li
                        title=""
                        class="active"
                        v-for="item in phone.attrs"
                        :key="item.id"
                      >
                        <a>{{ item.name.split("|")[0] }}</a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="buy-box-child">
                  <div class="option-box">
                    <div class="title">选择颜色</div>
                    <ul class="clearfix">
                      <li
                        title=""
                        class=""
                        v-for="item in phone.attrs"
                        :key="item.id"
                      >
                        <a>{{ item.name.split("|")[1] }}</a>
                      </li>
                      <!--<li title="陶瓷黑"
                          class="active"><a>陶瓷黑</a></li>
                      <li title="影青灰"
                          class=""><a>影青灰</a></li>
                      <li title="陶瓷白"
                          class=""><a>陶瓷白</a></li>-->
                    </ul>
                  </div>
                </div>
                <div class="selected-list">
                  <ul>
                    <li>
                      Xiaomi MIX 4 8GB+128GB 陶瓷黑<span
                        >{{ phone.price }}元
                      </span>
                    </li>
                  </ul>
                  <div class="total-price">总计：{{ phone.price }}元</div>
                  <div class="btn-box">
                    <div class="sale-btn" @click="addGoodsForRedisShoppingCart()">
                      <a
                        data-spm="product_14789.add_cart.1"
                        href="javascript:void(0);"
                        class="btn btn-primary"
                        data-params='""'
                        >加入购物车</a
                      >
                      <!---->
                    </div>
                    <div class="favorite-btn">
                      <a
                        data-spm="product_14789.favor.1"
                        class="btn-gray btn-like"
                        data-params='""'
                        ><i class="iconfont default"></i>
                        <i class="iconfont red"><i class="iconfont"></i></i
                        >喜欢</a
                      >
                    </div>
                    <div class="after-sale-info">
                      <span>
                        <a href="javascript:void(0);" class="support">
                          <i class="el-icon-circle-check"></i>
                          <em>小米自营</em>
                        </a>
                      </span>
                      <span>
                        <a href="javascript:void(0);" class="support">
                          <i class="el-icon-circle-check"></i>
                          <em>小米发货</em>
                        </a>
                      </span>
                      <span>
                        <a href="javascript:void(0);" class="support">
                          <i class="el-icon-circle-check"></i>
                          <em>7天无理由退款</em>
                        </a>
                      </span>
                      <span>
                        <a href="javascript:void(0);" class="support">
                          <i class="el-icon-circle-check"></i>
                          <em>运费说明</em>
                        </a>
                      </span>
                      <span>
                        <a href="javascript:void(0);" class="support">
                          <i class="el-icon-circle-check"></i>
                          <em>企业信息</em>
                        </a>
                      </span>
                      <span>
                        <a href="javascript:void(0);" class="support">
                          <i class="el-icon-circle-check"></i>
                          <em>售后服务政策</em>
                        </a>
                      </span>
                      <span>
                        <a href="javascript:void(0);" class="support">
                          <i class="el-icon-circle-check"></i>
                          <em>七天价格保护</em>
                        </a>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <mi-footer></mi-footer>
</template>

<script>
import MiFooter from '@/components/MiFooter'
import MiHeader from '@/components/MiHeader'
import axios from 'axios'
export default {
  name: 'Product',
  components: {
    MiFooter,
    MiHeader
  },
  props: {
    productId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      userId: 123,
      phone: {
        // id: '10001',
        // name: 'Xiaomi MIX 4',
        // pic_urls: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&amp;w=400&amp;h=400&amp;f=webp&amp;q=90',
        // price: '4999',
        // description: 'CUP全面屏'
      }
    }
  },
  created () {
    this.onLoad()
  },
  methods: {
    async onLoad () {
      // 下面的调用会产生跨域异常，待解决。
      // this.phonelist = await request({
      //   method: 'GET',
      //   url: '/product'
      // })
      // this.phone = await axios.get(`http://localhost:3000/product/${this.productId
      this.phone = await axios.get(`http://localhost:8081/product/getProduct?id=${this.productId
        }`).then(res => res.data)
      console.log(this.phone)
      console.log(this.phone.attrs[0].name)
      console.log(this.phone.attrs[0].name.split('|')[0])
    },
    addGoodsForRedisShoppingCart () {
      axios.post('http://localhost:8088/order/addGoodsForRedisShoppingCart',
        {
          shoppingCart: [
            {
              productId: this.phone.id,
              id: this.phone.id,
              productName: this.phone.name,
              pic_urls: this.phone.pic_urls,
              price: this.phone.price,
              num: 1,
              check: false
            }
          ],
          userId: this.userId
        }).then((res) => {
        alert(res.data.msg)
      })
    }
  }
}
</script>

<style>
.xm-product-box {
  position: relative;
  z-index: 4;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  -webkit-box-shadow: 0 5px 5px rgb(0 0 0 / 7%);
  box-shadow: 0 5px 5px rgb(0 0 0 / 7%);
}
.xm-product-box .nav-bar {
  position: relative;
  height: 63px;
  width: 100%;
  margin-top: 0;
  color: #616161;
}
.xm-product-box .nav-bar h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 60px;
  color: #424242;
  float: left;
}
.xm-product-box .nav-bar .left {
  float: left;
  margin-left: 5px;
  font-size: 12px;
  margin-top: 21px;
}
.xm-product-box .nav-bar .right {
  margin: 17px 0 0 0;
}
.xm-product-box .nav-bar .left .separator,
.xm-product-box .nav-bar .right .separator {
  margin: 0 0.5em;
  color: #424242;
}
.xm-product-box .nav-bar .left a,
.xm-product-box .nav-bar .right a {
  color: #616161;
}

.xm-product-box .nav-bar .right {
  float: right;
  margin: 17px 0 0 0;
}

.xm-product-box .nav-bar .left a.cur,
.xm-product-box .nav-bar .left a:hover,
.xm-product-box .nav-bar .right a.cur,
.xm-product-box .nav-bar .right a:hover {
  color: #ff6700;
}

.product-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 32px;
  padding-bottom: 12px;
}
.product-box .img-left {
  width: 606px;
  position: relative;
}
.product-imglist {
  position: relative;
}
.product-imglist .img-box {
  position: absolute;
  top: 0;
}
.product-imglist img {
  width: 560px;
  height: 560px;
}

.product-box .product-con {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-left: 20px;
}
.product-con .sale-desc {
  color: #b0b0b0;
  margin: 0;
  padding: 0;
  padding-top: 8px;
  line-height: 1.5;
}
.product-con .company-info {
  color: #ff6700;
  margin-bottom: 0;
}
.product-con .price-info {
  display: block;
  font-size: 18px;
  line-height: 1;
  color: #ff6700;
  padding: 12px 0 10px;
}
.product-con .price-info span {
  display: inline-block;
}

.line {
  margin-top: 12px;
  border-bottom: 1px solid #e0e0e0;
}
.product-con .address-box {
  margin: 20px 0;
}
.product-address {
  padding: 30px 50px;
  position: relative;
  background: #fafafa;
  border: 1px solid #e0e0e0;
}
.product-address .iconfont {
  position: absolute;
  left: 20px;
  top: 26px;
  font-size: 20px;
  color: #999;
}
.product-address span {
  display: inline;
  margin-right: 14px;
}
.product-address .address-info,
.product-address .edit {
  display: inline-block;
}
.product-address .edit {
  color: #ff6700;
  margin: 0;
}
.product-address .info {
  color: #b0b0b0;
}
.product-address .info span {
  color: #ff6700;
  margin: 0;
}

.buy-option .batch-box,
.buy-option .buy-box-child,
.buy-option .buy-box-mode {
  margin-bottom: 30px;
  position: relative;
}
.buy-option .title {
  font-size: 18px;
}
.mi-detail ul {
  margin: 0;
  padding: 0;
}
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
.option-box li.active,
.option-box li:hover {
  z-index: 3;
  border-color: #ff6700;
}
.option-box li {
  margin-right: 12px;
  margin-top: 10px;
  line-height: 42px;
  height: 42px;
  position: relative;
  border: 1px solid #e0e0e0;
  list-style: none;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  float: left;
  width: 292px;
  font-size: 16px;
  text-align: center;
}
.option-box li.active a,
.option-box li:hover a {
  color: #ff6700;
}
.option-box li a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 5px;
}
.buy-option line:nth-child(2n) {
  margin-right: 0;
}

.selected-list {
  background: #f9f9fa;
  padding: 30px;
  margin-bottom: 30px;
}
.selected-list ul {
  padding: 0;
  margin: 0;
}
.selected-list ul li:first-child {
  margin-top: 0;
}

.selected-list ul li del,
.selected-list ul li span {
  float: right;
}
.selected-list ul li {
  list-style: none;
  line-height: 30px;
  color: #616161;
}
.selected-list .total-price {
  color: #ff6700;
  font-size: 24px;
  padding-top: 20px;
}
.btn-box {
  margin: 10px 0 20px 0;
}
.sale-btn {
  display: inline-block;
  margin-right: 10px;
}
.sale-btn .btn {
  width: 298px;
  height: 52px;
  line-height: 52px;
  font-size: 16px;
}
.btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.btn-primary {
  background: #ff6700;
  border-color: #ff6700;
  color: #fff;
}
.favorite-btn {
  display: inline-block;
  vertical-align: top;
}
.btn-like {
  display: block;
  width: 140px;
  height: 52px;
  line-height: 52px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  font-size: 16px;
  position: relative;
}
.btn-gray {
  background: #b0b0b0;
  border-color: #b0b0b0;
  color: #fff;
}

.after-sale-info span {
  display: inline-block;
}
.after-sale-info a {
  display: inline-block;
  margin-right: 15px;
  line-height: 30px;
  margin-bottom: 10px;
  cursor: default;
  white-space: nowrap;
  color: #b0b0b0;
}
</style>
